<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="shortcut icon" href="#" />
    <link rel="stylesheet" href="css/element-ui.css"/>
    <script src="js/vue.js"></script>
    <script src="js/element-ui.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <h3>个人中心</h3>

    <!--  表格：装主体数据   -->
    <div>
        <el-table ref="multipleTable" :data="user" tooltip-effect="dark" style="width: 100%;"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="用户编号" width="120"></el-table-column>
            <el-table-column prop="username" label="用户名称" width="120"></el-table-column>
            <el-table-column prop="salary" label="年薪" width="120"></el-table-column>
            <el-table-column prop="gender" label="性别" width="60"></el-table-column>
            <el-table-column prop="birth" label="生日" width="120"></el-table-column>
            <el-table-column label="用户头像" width="120">
                <template slot-scope="scope">
                    <el-avatar :size="60" :src="scope.row.avatar" @error="errorHandler" shape="square">
                        <img src="imgs/error.png"/>
                    </el-avatar>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" circle
                               @click="handleEdit(scope.$index, scope.row)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle
                               @click="handleDelete(scope.$index, scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
<script>
    // 获取sessionStorage中的用户名
    let names = sessionStorage.getItem("username");
    console.log(names + "=======")
    let vm = new Vue({
        el: '#app',
        created() {
            this.Tuser.username = names;
            this.selectOne(names); // 确保传递正确的参数
        },
        data() {
            return {
                Tuser: {
                    username: '',
                },
                user: [],  // 初始化为数组
                username: names
            }
        },
        methods: {
            // 头像加载失败时显示默认图片
            errorHandler() {
                return true
            },

            // 根据名字查询
            selectOne() {
                axios({
                    url: "/user/selectOne",
                    method: 'post',
                    data: this.Tuser
                }).then(res => {
                    console.log(res);
                    if (res.data.code == 200) {
                        this.user = res.data.data;
                    }
                })
            },
            handleEdit(index, row) {
                console.log("编辑:", index, row);
            },
            handleDelete(index, row) {
                console.log("删除:", index, row);
            }
        }
    });
</script>
</body>
</html>